<template>
    <div class="root">
        <el-container style="height: 100vh;">
            <el-aside style="width:16%;">
                <main-aside :menuList="menuList" @headTitle="headTitleEvent"></main-aside>
            </el-aside>
            <el-container>
                <el-header style="height: 8%; background-color: #6777ef;">
                    <main-header :headTitle="headName"></main-header>
                </el-header>
                <el-main style="background-color: #f3f4f7;">
                    <div class="MainContent">
                        <router-view></router-view>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import MainAside from '../components/MainAside.vue'
import MainHeader from '../components/MainHeader.vue'
export default {
    components: { 
        MainAside,
        MainHeader
    },
    data() {
        return {
            headName: '首页',
            menuList: [
                {
                    id: '1',
                    name: '首页',
                    url: '/home',
                    icon: 'el-icon-house'
                },
                {
                    id: '2',
                    name: '员工管理',
                    url: '/user',
                    icon: 'el-icon-menu'
                },
                {
                    id: '3',
                    name: '借阅管理',
                    url: '/record',
                    icon: 'el-icon-document'
                },
                {
                    id: '4',
                    name: '书单管理',
                    url: '/book',
                    icon: 'el-icon-setting'
                }
            ]
        }
    },
    methods: {
        headTitleEvent(name) {
            this.headName = name;
        }
    }
}
</script>

<style scoped>
    * {
        margin: 0;
        padding: 0;
    }

    .MainContent {
        height: 100%;
        border-radius: 5px;
        background-color: #fff;
    }
</style>